<template>
    <div class="sys-container">
        <el-dialog v-model="state.isShowDialog" draggable width="769px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="起始结束">
                            <el-button @click="secondarySetup('time')" size="default">设置起始小时 - 结束小时</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="到量控制">
                            <el-button @click="secondarySetup('type')" size="default">设置请求上限 - 用户上限</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="管控级别">
                            <el-button @click="secondarySetup('controlLevel')" size="default">设置管控级别</el-button>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="日期">
                            <el-button @click="secondarySetup('darta')" size="default">设置开始日期 - 结束日期</el-button>
                        </el-form-item>
                    </el-col> -->
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="排序">
                            <el-button @click="secondarySetup('sort')" size="default">设置排序</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="权重">
                            <el-button @click="secondarySetup('weight')" size="default">设置权重</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="屏蔽城市">
                            <el-button @click="secondarySetup('city')" size="default">设置屏蔽城市</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="状态">
                            <el-radio-group v-model="state.ruleForm.status" class="ml-4"
                                @change="radioChange(state.ruleForm.status)">
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="4">短期关停</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="当日同步" prop="controlLevel">
                            <el-radio-group v-model="state.ruleForm.syncPlanDaily" class="ml-4"
                                @change="syncPlanDailyChange(state.ruleForm.syncPlanDaily)">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="媒体反馈">
                            <el-radio-group v-model="state.ruleForm.isMediaFeedback" class="ml-4"
                                @change="isMediaFeedbackChange(state.ruleForm.isMediaFeedback)">
                                <el-radio label="true">是</el-radio>
                                <el-radio label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel('1')" size="default">取 消</el-button>
                    <!-- <el-button type="primary" @click="submit('1')" size="default">确 定</el-button> -->
                </span>
            </template>
        </el-dialog>
    </div>

    <!-- 二次弹框  -->
    <div class="sys-container">
        <el-dialog v-model="state.isTwoShowDialog" draggable width="769px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <!-- <span> {{ props.title }} </span> -->
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.trends == 'time'">
                        <el-form-item label="起始小时" prop="dailyStartHour">
                            <el-input-number v-model.trim="state.ruleForm.dailyStartHour" placeholder="请输入起始小时" :min="0"
                                :max="23" controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.trends == 'time'">
                        <el-form-item label="结束小时" prop="dailyEndHour">
                            <el-input-number v-model.trim="state.ruleForm.dailyEndHour" placeholder="请输入结束小时" :min="1"
                                :max="23" controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="mb20" v-show="state.trends == 'type'">
                        <el-form-item label="到量控制" prop="arrivalType">
                            <el-radio-group v-model.trim="state.ruleForm.arrivalType" @change="arrivalControl">
                                <el-radio :label="1">请求</el-radio>
                                <el-radio :label="2">用户</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7" class="mb20" v-show="state.trends == 'type'">
                        <el-form-item label="请求上限" prop="requestLimit">
                            <el-input-number v-model.trim="state.ruleForm.requestLimit" placeholder="请输入上限" :min="0"
                                controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7" class="mb20" v-show="state.trends == 'type'">
                        <el-form-item label="用户上限" prop="userLimit">
                            <el-input-number v-model.trim="state.ruleForm.userLimit" placeholder="请输入用户上限" :min="0"
                                controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.trends == 'sort'">
                        <el-form-item label="排序" prop="sort">
                            <el-input-number v-model.trim="state.ruleForm.sort" placeholder="请输入排序" :min="0"
                                controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.trends == 'weight'">
                        <el-form-item label="权重" prop="weight">
                            <el-input-number v-model.trim="state.ruleForm.weight" placeholder="请输入权重" :min="0"
                                controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.trends == 'city'">
                        <el-form-item label="屏蔽城市" prop="weight">
                            <el-input v-model="state.ruleForm.city" placeholder="请输入屏蔽城市" :min="0"
                                controls-position="right" class="w100"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"
                        v-show="state.trends == 'controlLevel'">
                        <el-form-item label="管控级别" prop="controlLevel">
                            <el-input-number v-model="state.ruleForm.controlLevel" placeholder="请输入管控级别" :min="0"
                                controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.trends == 'darta'">
                        <el-form-item label='日期'>
                            <el-date-picker class='w100' v-model='state.ruleForm.UTCDateRange' type='datetimerange'
                                range-separator='至' start-placeholder='开始日期' end-placeholder='结束日期' :shortcuts='shortcuts'
                                :disabled="props.title === '编辑'" value-format="YYYY-MM-DD HH:mm:ss" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider>
                是否要对以下 {{ state.tableData.length }} 项进行操作？
            </el-divider>
            <el-table :data="state.tableData" style="width: 100%" max-height="250">
                <el-table-column fixed prop="customerName" label="客户名称" width="200" show-overflow-tooltip />
                <el-table-column prop="productName" label="产品名称" width="150" show-overflow-tooltip />
                <el-table-column prop="startTime" label="开始日期" width="180" show-overflow-tooltip />
                <el-table-column prop="endTime" label="结束日期" width="180" show-overflow-tooltip />
                <el-table-column prop="province" label="开通省份" align="center" width="100" show-overflow-tooltip />
                <el-table-column prop="dailyStartHour" label="起始小时" width="80" align="center" show-overflow-tooltip />
                <el-table-column prop="dailyEndHour" label="结束小时" width="80" align="center" show-overflow-tooltip />
                <el-table-column prop="controlLevel" label="管控级别" width="80" align="center" show-overflow-tooltip />
                <el-table-column prop="sort" label="排序" width="80" align="center" show-overflow-tooltip />
                <el-table-column prop="city" label="屏蔽城市" width="120" align="center" show-overflow-tooltip />
                <el-table-column prop="weight" label="权重" width="80" align="center" show-overflow-tooltip />
                <el-table-column prop="isMediaFeedback" label="媒体反馈" width="80" align="center" show-overflow-tooltip />
                <el-table-column fixed="right" label="操作" width="60">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel('2')" size="default">取 消</el-button>
                    <el-button type="primary" @click="submit('2')" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="editDiProductPlan">
import { reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt';
import { optionDict } from '/@/const/dict';
import { convertLocalDate, datePickerShortcuts } from '/@/utils/formatTime';
import { ElMessageBox, ElMessage } from 'element-plus';
import { DiProductPlan } from '/@/api/models';
import SysDiCustomerProductApi from '/@/api/delivery/customerProduct';
import SysDiToucherProductPlanApi from '/@/api/delivery/toucherProductPlan';
const props = defineProps({
    title: String,
});
const shortcuts = datePickerShortcuts();
const ruleFormRef = ref();
const state = reactive({
    selectedProduct: null,
    productDict: [],
    isShowDialog: false,
    ruleForm: {} as DiProductPlan,
    arrList: <any>[],
    isTwoShowDialog: false,
    trends: '',
    tableData: []
});

// 打开弹窗
const openDialogedit = async (row: DiProductPlan, list: any) => {
    isArrival.isArrivalControl = true;
    state.ruleForm = row;
    state.isShowDialog = true;
    state.arrList = list;
    state.tableData = list;
};

// 关闭弹窗
const closeDialog = () => {
    mittBus.emit('submitRefresh');
    state.isShowDialog = false;
};

// 取消
const cancel = (val: string) => {
    if (val == '1') {
        state.isShowDialog = false;
        closeDialog();
    } else {
        state.isTwoShowDialog = false;
        closeDialog();
    }
};

// 单选按钮事件
const radioChange = (val: any) => {
    let text = '';
    if (val == 1)
        text = '启用';
    else
        text = "短期关停";

    ElMessageBox.confirm(
        `您确定要将状态设置为 【${text}】 吗？`,
        '状态',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            submit('1');
        })

}

// 当日同步.
const syncPlanDailyChange = (val: any) => {
    let text = '';
    if (val == '1')
        text = '是';
    else
        text = "否";

    ElMessageBox.confirm(
        `您确定要将当日同步设置为 【${text}】 吗？`,
        '当日同步',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            submit('1');
        })

}

// 媒体反馈
const isMediaFeedbackChange = (val: any) => {
    let text = '';
    if (val == 'true')
        text = '是';
    else
        text = "否";

    ElMessageBox.confirm(
        `您确定要将媒体反馈设置为 【${text}】 吗？`,
        '媒体反馈',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            submit('1');
        })

}

// 提交
const submit = (val: any) => {
    // console.log(state.ruleForm.UTCDateRange,'s');

    if (val == '1') {
        ruleFormRef.value.validate(async (valid: boolean) => {
            if (!valid) return;
            let arr: any = [{
                arrivalType: -1,
                dailyEndHour: -1,
                dailyStartHour: -1,
                requestLimit: -1,
                status: -1,
                syncPlanDaily: -1,
                userLimit: -1,
                controlLevel: -1,
                sort: -1,
                weight: -1,
                city: -1,
                isMediaFeedback: -1,
                startTime:-1,
                endTime:-1,
                UTCDateRange:-1
            }];
            let obj = Object.assign(arr[0], state.ruleForm)
            arr[0] = obj;
            arr.map((item: any) => {
                // console.log(item.UTCDateRange,'2');

                state.arrList.forEach(i => {
                    i.arrivalType = item.arrivalType || i.arrivalType;
                    i.dailyEndHour = item.dailyEndHour || i.dailyEndHour;
                    i.dailyStartHour = item.dailyStartHour || i.dailyStartHour;
                    i.requestLimit = item.requestLimit || i.requestLimit;
                    i.status = item.status || i.status;
                    i.syncPlanDaily = item.syncPlanDaily || i.syncPlanDaily;
                    i.userLimit = item.userLimit || i.userLimit;
                    i.controlLevel = item.controlLevel || i.controlLevel;
                    i.sort = item.sort || i.sort;
                    i.weight = item.weight || i.weight;
                    i.city = item.city || i.city;
                    i.isMediaFeedback = item.isMediaFeedback || i.isMediaFeedback;
                    i.startTime = item.UTCDateRange[0] ||i.startTime;
                    i.endTime = item.UTCDateRange[1] || i.endTime;
                })
            })
            await SysDiToucherProductPlanApi().batchEdit(state.arrList);
            // closeDialog();

        })
    } else {
        state.isTwoShowDialog = false;
        ruleFormRef.value.validate(async (valid: boolean) => {
            if (!valid) return;
            let arr: any = [{
                arrivalType: -1,
                dailyEndHour: -1,
                dailyStartHour: -1,
                requestLimit: -1,
                status: -1,
                syncPlanDaily: -1,
                userLimit: -1,
                controlLevel: -1,
                sort: -1,
                weight: -1,
                city: -1,
                isMediaFeedback: -1,
                startTime:-1,
                endTime:-1,
                UTCDateRange:-1
            }];
            let obj = Object.assign(arr[0], state.ruleForm)
            arr[0] = obj;
            arr.map((item: any) => {
                // console.log(item.arrivalType,'sss');

                state.arrList.forEach(i => {
                    i.arrivalType = item.arrivalType || i.arrivalType;
                    i.dailyEndHour = item.dailyEndHour || i.dailyEndHour;
                    i.dailyStartHour = item.dailyStartHour || i.dailyStartHour;
                    i.requestLimit = item.requestLimit || i.requestLimit;
                    i.status = item.status || i.status;
                    i.syncPlanDaily = item.syncPlanDaily || i.syncPlanDaily;
                    i.userLimit = item.userLimit || i.userLimit;
                    i.controlLevel = item.controlLevel || i.controlLevel;
                    i.sort = item.sort || i.sort;
                    i.weight = item.weight || i.weight;
                    i.city = item.city || i.city;
                    i.isMediaFeedback = item.isMediaFeedback || i.isMediaFeedback;
                    i.startTime = item.UTCDateRange[0] ||i.startTime;
                    i.endTime = item.UTCDateRange[1] || i.endTime;
                })
            })
            await SysDiToucherProductPlanApi().batchEdit(state.arrList);
            closeDialog();

        })
    }

};

// 到量控制请求 & 用户 哪个可以选中并修改
let isArrival = reactive({
    isArrivalControl: true
});

// 二次设置
const secondarySetup = (val: any) => {
    switch (val) {
        case 'time':
            state.trends = 'time'
            state.isTwoShowDialog = true;
            break;
        case 'type':
            state.trends = 'type'
            state.isTwoShowDialog = true;
            break;
        case 'controlLevel':
            state.trends = 'controlLevel'
            state.isTwoShowDialog = true;
            break;
        case 'sort':
            state.trends = 'sort'
            state.isTwoShowDialog = true;
            break;
        case 'weight':
            state.trends = 'weight'
            state.isTwoShowDialog = true;
            break;
        case 'city':
            state.trends = 'city'
            state.isTwoShowDialog = true;
            break;
        case 'darta':
            state.trends = 'darta'
            state.isTwoShowDialog = true;
            break;

        default:
            break;
    }
}

// 移除
const deleteRow = (val: any) => {
    state.tableData.splice(val, 1);
}

// 到量控制请求 & 用户 上限是否禁用
const arrivalControl = () => {
    isArrival.isArrivalControl = !isArrival.isArrivalControl;
}


// 导出对象
defineExpose({ openDialogedit });
</script>
